<style>
.textarea-container {
    position: relative;
}

.clear-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 4px 8px;
    font-size: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.clear-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
</style>

<div id="qrcode-tool" class="tool-content active">
    <div class="tool-header">
        <h2>批量二维码生成器</h2>
        <p class="tool-description">快速生成多个二维码，支持自定义样式和批量操作</p>
    </div>
    
    <!-- 输入方式切换标签 -->
    <div class="input-tabs">
        <button class="input-tab active" data-tab="manual">手动输入</button>
        <button class="input-tab" data-tab="auto">自动生成</button>
    </div>

    <!-- 手动输入区域 -->
                <div id="manual-input" class="input-content active">
                    <div class="input-section">
                        <div class="input-group" style="display: flex; align-items: center; gap: 10px;">
                             <label style="margin: 0; min-width: 80px;">已保存前缀</label>
                             <select id="prefix-select" style="flex: 1;">
                                 <option value="">选择已保存前缀</option>
                             </select>
                             <button type="button" id="manage-prefix-btn" class="secondary-btn" title="管理前缀">📋</button>
                             <label style="margin: 0; min-width: 80px;">自定义前缀</label>
                             <input type="text" id="manual-prefix" placeholder="例如：SN-" style="flex: 1;">
                             <button type="button" id="save-prefix-btn" class="secondary-btn" title="保存前缀">💾</button>
                         </div>
                        <div class="input-group">
                    <label>输入数据（一行一个）：</label>
                    <div class="textarea-container">
                        <textarea id="qrcode-data-manual" rows="8" placeholder="请输入数据，每行一个..."></textarea>
                        <button type="button" onclick="clearManualInput()" class="clear-btn" title="清除内容">清除</button>
                    </div>
                </div>
                    </div>
                </div>

    <!-- 自动生成区域 -->
    <div id="auto-input" class="input-content">
        <div class="input-section">
            <div class="form-row">
                <div class="form-group">
                    <label>前缀：</label>
                    <input type="text" id="prefix" placeholder="例如：SN-">
                </div>
                <div class="form-group">
                    <label>数字长度：</label>
                    <input type="number" id="digit-length" value="3" min="1" max="10">
                </div>
                <div class="form-group">
                    <label>开始编号：</label>
                    <input type="number" id="start-num" value="1" min="1">
                </div>
                <div class="form-group">
                    <label>结束编号：</label>
                    <input type="number" id="end-num" value="10" min="1">
                </div>
            </div>
            <div class="example-text">
                <strong>示例：</strong>前缀="SN-", 数字长度=3, 开始=5, 结束=8 → 生成 SN-005, SN-006, SN-007, SN-008
            </div>

        </div>
    </div>

    <!-- 二维码设置 -->
    <div class="settings-section">
        <h3>二维码样式设置</h3>
        <div class="form-row">
            <div class="form-group">
                <label>二维码大小（像素）：</label>
                <input type="number" id="qr-size" value="200" min="50" max="500">
            </div>
            <div class="form-group">
                <label>容错等级：</label>
                <select id="qr-error-level">
                    <option value="L">L（低 ~7%）</option>
                    <option value="M" selected>M（中 ~15%）</option>
                    <option value="Q">Q（高 ~25%）</option>
                    <option value="H">H（最高 ~30%）</option>
                </select>
            </div>
        </div>
    </div>

    <div class="actions">
                <button onclick="generateQRCodes()" class="primary-btn">生成二维码</button>
                <button onclick="downloadAsZip()" class="secondary-btn">下载为ZIP</button>
                <button onclick="clearQRCodes()" class="secondary-btn">清空</button>
            </div>

    <div id="qrcode-results" class="results"></div>
</div>